<template>
  <div class="space-y-8">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- 左侧：金币余额 -->
      <div class="bg-white p-6 rounded-lg shadow-card flex flex-col items-center">
        <div class="flex flex-col items-center w-full">
          <div class="text-gray-500 text-base mb-1 tracking-wide">金币余额</div>
          <div class="text-5xl font-extrabold text-blue-600 mb-2 leading-tight">0</div>
        </div>
        <div class="w-full flex justify-center my-2">
          <div class="h-px w-2/3 bg-gray-200"></div>
        </div>
        <div class="text-xs text-gray-400 space-y-1 text-center w-full">
          <p>金币可用于下载网小助手的文件收集接口的创建</p>
          <p>充值比例：<span class="font-semibold text-gray-500">1元=100金币</span></p>
          <p>金币可用来购买会员等服务</p>
        </div>
      </div>

      <!-- 右侧：账户充值 -->
      <div class="bg-white p-6 rounded-lg shadow-sm">
        <h3 class="text-lg font-semibold mb-4">账户充值</h3>
        <div class="flex items-center mb-4">
          <el-input-number 
            v-model="rechargeAmount" 
            :min="1" 
            :max="1000"
            class="mr-2"
          />
          <span class="text-gray-600">= {{ rechargeAmount * 100 }} 金币</span>
        </div>
        
        <div class="space-y-3">
          <el-button 
            type="primary" 
            class="w-full"
            @click="payWithAlipay"
          >
            <el-icon class="mr-2"><CreditCard /></el-icon>
            支付宝支付
          </el-button>
          <el-button 
            type="success" 
            class="w-full"
            @click="payWithWechat"
            style="margin-left: 0px;"
          >
            <el-icon class="mr-2"><Money /></el-icon>
            微信支付
          </el-button>
        </div>
      </div>
    </div>

    <!-- 金币使用情况 -->
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-lg font-semibold">金币使用情况</h3>
        <div class="flex items-center space-x-4">
          <el-select v-model="filterType" placeholder="请选择" style="width: 120px">
            <el-option label="全部" value="all" />
            <el-option label="充值" value="recharge" />
            <el-option label="消费" value="consume" />
          </el-select>
          <el-input 
            v-model="searchKeyword" 
            placeholder="请输入"
            style="width: 200px"
          />
          <el-button type="primary" @click="searchRecords">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
      </div>

      <el-table :data="coinRecords" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="type" label="货币类型" width="120" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="amount" label="变动数量" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
      </el-table>

      <div v-if="coinRecords.length === 0" class="text-center py-12">
        <el-icon :size="48" color="#C0C4CC" class="mb-4">
          <DocumentCopy />
        </el-icon>
        <p class="text-gray-500">暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CreditCard, Money, DocumentCopy } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const rechargeAmount = ref(6)
const filterType = ref('all')
const searchKeyword = ref('')
const coinRecords = ref([])
const emit = defineEmits(['pay']) 
const payWithAlipay = () => {
  ElMessage.success('正在跳转到支付宝支付...')
  emit('pay', { payType: 'alipay', amount: rechargeAmount.value * 100 })
}

const payWithWechat = () => {
  ElMessage.success('正在跳转到微信支付...')
  emit('pay', { payType: 'wechat', amount: rechargeAmount.value * 100 })
}

const searchRecords = () => {
  ElMessage.info('查询功能开发中...')
}

const resetSearch = () => {
  filterType.value = 'all'
  searchKeyword.value = ''
  ElMessage.info('已重置搜索条件')
}
</script>

<style scoped>
.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.space-y-8 > * + * {
  margin-top: 2rem;
}

.shadow-card {
  box-shadow: 0 4px 16px 0 rgb(64 112 244 / 10%);
  border-radius: 16px;
}
</style>
